<!DOCTYPE html>
<html lang="zh" xml:lang="zh">
<head>
    <meta charset='utf-8'>
    <title>dataBar</title>
    <script type='text/javascript' src="../../ref/jquery-3.2.1.min.js"></script>
    <script src="../../ref/echarts-all.js"></script>
    <style type="text/css">
        * {
            font-family: "微软雅黑";
        }

        body {
            margin: 20px;
        }

        .chart {
            width: 50%;
            height: 50%;
            position: absolute;
        }

        #_1, #_2 {
            top: 0px;
        }

        #_3, #_4 {
            bottom: 0px;
        }

        #_1, #_3 {
            left: 0px;
        }

        #_2, #_4 {
            right: 0px;
        }

        #chart1, #chart2, #chart3, #chart4 {
            width: 95%;
            height: 94%;
            margin: 2.5%;
            position: relative;
        }

        #chart1 {
            border: 1px solid green;

        }

        .dateTime {
            width: 30%;
            height: 60px;
            float: left;
        }

        p, .dateTime {
            margin-left: 20px;
        }

        .input {
            width: 140px;
        }

        #timeEnd {
            top: 20px;
            left: 200px;
        }

        .time {
            width: 100%;
            height: 50px;
        }

        .place {
            width: 100%;
            height: 200px;
        }

        .placeName {
            color: black;
            margin: 15px;
            font-size: 16px;
            line-height: 30px;
        }

        .placeName:hover {
            color: blue;
            text-decoration: underline;
            cursor: pointer;
        }

        .table1 {
            width: 90%;
            border-collapse: collapse;
        }

        .table1 thead {
            background: #EAF2D3;
        }

        .table1 th, .table1 td {
            border: 1px solid #98bf21;
        }

        .table1 td {
            text-align: center;
        }

        #tableData {
            height: 350px;
            overflow-y: scroll;
            overflow-x: hidden;
            display: block;
        }

        table thead, tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

        table thead {
            width: calc(100% - 1em);
        }

        #chart3 table {
            width: 100%;
        }

        #chart3 td {
            width: 12.5%;
            height: 40px;
            border-bottom: 1px solid green;
        }

        #chart3 tr {
            height: 40px;
        }

        .table tr td {
            text-align: center;
        }


    </style>
</head>
<body>
<div id="_1" class="chart">
    <div id="chart1">
        <h4> 各指标变化曲线</h4>
        <div class="time">
            <div class="dateTime">
                <span class="label">开始时间:</span>
                <input type="text" class="input" id="timeBegin" placeholder="2017-01-01 00:00:00">
            </div>

            <div class="dateTime">
                <span class="label">结束时间:</span>
                <input type="text" class="input" id="timeEnd" placeholder="2017-01-01 00:00:00">
            </div>
        </div>

        <div class="place">
            <p>请选择一个目标城市:</p>
            <span id="placename"></span>
        </div>


    </div>
</div>

<div id="_2" class="chart">
    <div id="chart2"></div>
</div>


<div id="_3" class="chart">

    <div id="chart3">

        <table class="table1">
            <thead>
            <tr>
                <td>时间</td>
                <td>AQI</td>
                <td>PM2.5</td>
                <td>PM10</td>
                <td>SO2</td>
                <td>NO2</td>
                <td>CO</td>
                <td>O3</td>
            </tr>
            </thead>
            <tbody id="tableData"></tbody>
        </table>
        <!--<div class="table">
            <table>

            </table>
        </div>-->
    </div>
</div>

<div id="_4" class="chart">
    <div id="chart4"></div>
</div>
<script src="../../ref/laydate/laydate.js" charset="utf-8"></script>
<script type="text/javascript">

    var BeginTime = getBeforeDate(8);
    var EndTime = getBeforeDate(1);
/*
    var BeginTime = '2017-01-21';
    var EndTime = '2017-01-27';*/
    var cityname = '郑州市';
    var type = null;
    laydate.render({
        elem: '#timeBegin'
        , type: 'datetime',
        done: function (value, date, endDate) {
            getTimeBegin(value);
        }
    });
    laydate.render({
        elem: '#timeEnd'
        , type: 'datetime',
        done: function (value, date, endDate) {
            getTimeEnd(value);
        }
    });

    function getTimeBegin(value) {
        BeginTime = value;
        ajax(BeginTime, EndTime, cityname);
    }

    function getTimeEnd(value) {
        EndTime = value;
        ajax(BeginTime, EndTime, cityname);
    }

    function getBeforeDate(n) {
        var n = n;
        var d = new Date();
        var year = d.getFullYear();
        var mon = d.getMonth() + 1;
        var day = d.getDate();
        if (day <= n) {
            if (mon > 1) {
                mon = mon - 1;
            }
            else {
                year = year - 1;
                mon = 12;
            }
        }
        d.setDate(d.getDate() - n);
        year = d.getFullYear();
        mon = d.getMonth() + 1;
        day = d.getDate();
        s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
        return s;
    }

    var startTimeDefault = getBeforeDate(8);
    var EndTimeDefault = getBeforeDate(1);
    $("#timeBegin").attr("placeholder", startTimeDefault);
    $("#timeEnd").attr("placeholder", EndTimeDefault);
    ajax(BeginTime, EndTime, cityname);

    function ajax(BeginTime, EndTime, cityname) {
        BeginTime = BeginTime || startTimeDefault;
        EndTime = EndTime || EndTimeDefault;
        cityname = cityname || '郑州市';
        if (BeginTime && EndTime && cityname) {
            $.get('/hbtserver/aqi/city/day?day0=' + BeginTime + '&day1=' + EndTime + '&city=' + cityname, function (res) {
                res.sort(function (a, b) {
                    return Date.parse(a.date) - Date.parse(b.date);//时间正序
                });
                mData(res);
                showTable(res);
            })
        }
    }

    var mName = ['aqi', 'pm2.5', 'pm10', 'so2', 'no2', 'co', 'o3'];
    var aireType = ['aqi', 'pm25', 'pm10', 'so2', 'no2', 'co', 'o3'];

    function mData(res) {
        if (cityname == null) {
            var cnames = "郑州市折线图";
            var cnames2 = "郑州市柱状图";
        } else {
            var cnames = cityname + "折线图";
            var cnames2 = cityname + "柱状图";
        }


        drawBar(cnames, mName, aireType, res, "line", chartSelect([1, 0, 0, 0, 0, 0, 0]), 'chart2');
        drawBar(cnames2, mName, aireType, res, "bar", chartSelect([1, 0, 1, 0, 0, 1, 0]), 'chart4');
    }

    function chartSelect(sel) {
        var mSelect = {
            'aqi': sel[0] || 1,
            'pm2.5': sel[1] || 0,
            'pm10': sel[2] || 0,
            'so2': sel[3] || 0,
            'no2': sel[4] || 0,
            'co': sel[5] || 0,
            'o3': sel[6] || 0
        }
        return mSelect;
    }

    //显示表格
    function showTable(data) {
        var len = data.length || 5;
        $('#tableData').empty();
        for (var i = 0; i < len; i++) {
            mydatas = data[i].date;
            mydatas = mydatas.substr(0, mydatas.length - 10);

            $('#tableData').append(
                '<tr>' +
                '<td>' + mydatas + '</td>' +
                '<td>' + data[i][aireType[0]].toFixed(2) + '</td>' +
                '<td>' + data[i][aireType[1]].toFixed(2) + '</td>' +
                '<td>' + data[i][aireType[2]].toFixed(2) + '</td>' +
                '<td>' + data[i][aireType[3]].toFixed(2) + '</td>' +
                '<td>' + data[i][aireType[4]].toFixed(2) + '</td>' +
                '<td>' + data[i][aireType[5]].toFixed(2) + '</td>' +
                '<td>' + data[i][aireType[6]].toFixed(2) + '</td>' +
                '</tr>'
            );
        }
        $("#tableData tr:even").css("background-color", "#bbffff");
        $("#tableData tr:odd").css("background-color", "#bbbbff");
    }

    //画图表
    function drawBar(title, mName, aireType, mData, type, mSelect, id) {
        var myChart = echarts.init(document.getElementById(id));
        var newData = [];
        var sliceSum = [];
        var slice_nums = [];
        var timeData = [];
        //获取数据
        for (var i in aireType) {
            console.log(aireType[i]);
            for (var m in mData) {
                sliceSum.push(mData[m][aireType[i]].toFixed(2));
            }
        }
        for (var i = 0, len = sliceSum.length; i < len; i += mData.length) {
            slice_nums.push(sliceSum.slice(i, i + mData.length));
        }
        for (var i in aireType) {
            newData.push({
                name: mName[i],
                type: type,
                data: slice_nums[i]
            })
        }
        //获取日期
        for (var i in mData) {


            var mydatas = mData[i].date;
            mydatas = mydatas.substr(0, mydatas.length - 10);
            timeData.push(mydatas);
        }
        var option = {
            title: {
                text: title,
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} : {c}"

            },
            legend: {
                data: mName,
                padding: 5,
                padding: 10,
                itemGap: 20,
                selected: mSelect,
                x: 'right',
                orient: 'vertical',
                y: 'center'
            },
            xAxis: [
                {
                    type: 'category',
                    data: timeData
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: newData
        };
        myChart.setOption(option);
    }

    function setMarker(Ydata) {
        var labelData = [];
        for (var i = 0; i < Ydata.length; i += 5) {
            labelData.push({value: Ydata[i], xAxis: i, yAxis: Ydata[i] + 0.5});
        }
    }

    //显示城市名字
    function showPlace(data) {
        for (var i = 0; i < data.length; i++)
            $('#placename').append('<span class="placeName">' + data[i] + '</span>');
        $('.placeName').click(function () {
            cityname = $(this).text();
            ajax(BeginTime, EndTime, cityname);
        })
    }

    function getData(data) {
        var name = [], aqi = [];
        for (var i = 0; i < data.length; i++) {
            name[i] = data[i].name;
        }
        return name;
    }

    $(document).ready(function () {
        $.get('/hbtserver/station/query?shi=shi', function (rt, st) {
            var shiData = $.parseJSON(rt);
            //TODO
            var cityName = getData(shiData);
            showPlace(cityName);
            //showTable(['2017-1','2017-2','2017-3','2017-4','2017-5','2017-6','2017-7']);
        });

    });
</script>
</body>
</html>
